<template>
  <div class="home">
    <van-nav-bar>
      <template #right>
        <van-button round type="info" color="#ccc" icon="search" route to="/search"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>

    <van-tabs lazy-render @rendered="huoqu" @click="huoqu" v-model="active" borer>
      <van-tab
        v-for="item in cate"
        :key="item._id"
        :title="item.name"
      ><div class="">
      <van-grid v-for="item in article" :key="item._id" >
        <van-grid-item route @click="$router.push({path:'/article',query:{id:item._id,user_id:item.author_id}})">
          <h4>{{ item.title }}</h4>
          <van-image v-for="(item1, index1) in item.imageSrc" :key="index1" :src="item1" />
          <div>
            <span>{{item.author}}</span>
          <van-icon name="like-o">{{item.like}}</van-icon>
          </div>
          
        </van-grid-item>
      </van-grid>
    </div>
      </van-tab>
    </van-tabs>
    

    <van-tabbar v-model="active" route>
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="add-o" to="/publish">发表</van-tabbar-item>
      <van-tabbar-item icon="manager-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Grid, GridItem, Image } from "vant";

export default {
  data() {
    return {
      active: 0,
      cate: [],
      article: "",
      list_id:''
    };
  },
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 获取·分类ID
    huoqu(title){
      console.log(title)
      this.list_id=this.cate[title]._id
      console.log(this.list_id)
      this.$http
        .post("/api/get_article_list",{
          cate_id:this.list_id,
          skip: "0",
          limit: "20",
        })
        .then((res) => {
          console.log(res);
          this.article = res.data.data;
          console.log(res.data.data);
        });
    },
    
    getData() {
      this.$http.post("/api/get_cate_list").then((res) => {
        console.log(res);
        this.cate = res.data.data;
      });
      
    },

  },
};
</script>
<style lang="less" scoped>
.van-button--round {
  padding: 0 100px;
  height: 30px;
  margin: 0 40px;
}
.van-grid {
  border-bottom: 1px #ccc solid;

}
.van-image__img {
  width: 375px;
  height: 100%;
}
h4 {
  width: 355px;
}

</style>